<template>
  <div class="app">
      <h1 >我是根组件APP</h1>
      <!-- 子组件 -->
      <!-- 
          自定义事件:
          第一:事件源 【在父组件内部:只能获取子组件事件源】
          第二:事件的类型
          第三:事件的回调
          第四:事件回调如何触发
       -->
       <!-- 
           事件源:App子组件     TodoHeader
           事件类型:自定义事件  getData
           事件回调:由App父组件的方法提供
           事件触发:通过$emit方法触发自定义事件
        -->
      <TodoHeader @getData="handler"></TodoHeader>

      <!-- 
          自定义事件完整的写法:
          利用$on与$emit方法实现自定义事件！！！！

       -->
      <TodoFooter ref="footer"></TodoFooter>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader'
import TodoFooter from './components/TodoFooter'
export default {
  name: '',
  components: {
    TodoHeader,
    TodoFooter
  },
  methods: {
    handler(params){
       console.log(params);
    }
  },
  //组件挂载完毕
  mounted(){
    //  console.log('App组件',this.$taidi);
     //获取事件源
     //当前函数里面的this是App组件的VC
     //获取事件源子组件VC
     //绑定自定义事件

     //问题:$on是谁的方法?也是Vue.prototype原型的方法

     //下面代码含义:
     //给事件源MyFooter子组件实例绑定一个自定义事件alcohol
    //  this.$refs.footer.$on('alcohol',(params)=>{
    //       console.log(params);
    //  })

     this.$bus.$on('money',(money)=>{
         console.log('爷爷'+money);
     })

  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
html,body{
  width: 100%;
  height: 100%;
}
.app{
  width: 100%;
  height: 100%;
  background: #eee;
}
</style>
